<template>
    <div class="login">
        <div class="account"><span></span><input type="text" v-model.trim="user" placeholder="请输入用户名" /></div>
        <div class="passsword"><span></span><input type="password" v-model.trim="password" placeholder="请输入密码" /></div>
        <div class="button">
            <button @click="login">登录</button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            user: "",
            password: "",
        };
    },
    methods: {
        login() {
            let arr = JSON.parse(localStorage.getItem("user"));
            if (arr == null) {
                this.$toast("账号或密码错误");
                return;
            }
            for (let i = 0; i < arr.length; i++) {
                //账号登录 || this.user == arr[i].account
                if (this.user == arr[i].user || this.password == arr[i].password) {
                    localStorage.setItem("token", this.user);
                    this.$toast("登录成功");
                    this.$router.push({ path: "/" });

                    return;
                }
            }
            this.$toast("账号或密码错误");
        },
    },
};
</script>

<style lang="scss" scoped>
.login {
    .passsword {
        margin-top: 0.625rem;
        box-sizing: border-box;
        height: 50px;
        width: 100%;
        background-color: rgb(243, 243, 243, 0.5);
        border-radius: 2rem;
        padding-left: 20px;
        display: flex;
        align-items: center;
    }
    .account {
        margin-top: 0.625rem;
        height: 50px;
        width: 100%;
        background-color: rgb(243, 243, 243, 0.5);
        border-radius: 2rem;
        box-sizing: border-box;
        padding-left: 20px;
        display: flex;
        align-items: center;
    }
    input::-webkit-input-placeholder {
        color: #aab2bd;
        font-size: 0.875rem;
    }
    input {
        caret-color: #727272;
        color: #727272;
        padding-left: 0.625rem;
        background-color: transparent;
        border: none;
        outline: none;
        font-size: 0.9375rem;
        height: 1.875rem;
        width: 100%;
    }
    button {
        background: linear-gradient(8deg, rgb(255 196 190 / 90%), rgb(255 116 100 / 60%));
        border: none;
        outline: none;
        margin-top: 1.875rem;
        width: 12.5rem;
        height: 50px;
        border-radius: 2rem;
    }
    .button {
        display: flex;
        justify-content: center;
        width: 100%;
        color: rgb(255, 255, 255);
    }
}
</style>
